<template>
  <PageListContainer>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="onClickReset">
        <el-form-item label="代理搜索">
          <el-input v-model="state.params.keyword" clearable placeholder="请输入代理账号名、手机号" style="width: 250px;" />
        </el-form-item>
        <el-form-item label="统计时间">
          <el-date-picker
            v-model="state.params._timeArr"
            type="daterange"
            format="YYYY-MM-DD"
            value-format="YYYYMMDD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :shortcuts="dateShortcut"
            @change="timeChange"
          />
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">
      <KToolbar>
        <template #right>
          <el-button type="default" :icon="Download" @click="onClickExportData">导出数据</el-button>
        </template>
      </KToolbar>

      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #user="s">
          <el-link type="primary" @click="onClickUser(s.row)">{{ s.row.new_user_count }}/{{ s.row.old_user_count }}</el-link>
        </template>
        <template #order_count="s">
          <el-link type="primary" @click="onClickOrderCount(s.row)">{{ s.row.order_count }}</el-link>
        </template>
        <template #actions="s">
          <el-link type="primary" @click="onClickModify(s.row)">调整保证金</el-link>
          <el-link type="primary" @click="onClickOprHistory(s.row)">操作记录</el-link>
        </template>
      </KTable>
    </div>
    <!-- 调整保证金 -->
    <AdjustBondModal ref="adjustBondModal" @success="methods.onSearch" />
    <!-- 操作记录-->
    <OperationListModal ref="operationListModal" />
  </PageListContainer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Download } from '@element-plus/icons-vue';
import { useTableList } from './hooks/use-table';
import { colonelListExport } from '@/api/crm-agency/download';
import AdjustBondModal from './components/adjust-bond-modal.vue';
import OperationListModal from './components/operation-list-modal.vue';
import { toolGetDateRangeShorcuts as dateShortcut } from '@/utils';

defineOptions({ name: 'AgencyDyjAgentAgentData' });
const { state, tableState, tableEvent, ...methods } = useTableList({});
const onClickExportData = () => {
  colonelListExport({
    ...state.params,
    extend_type: 2 });
};
const router = useRouter();

const onClickUser = (row: any) => {
  const { name, colonel_id } = row;
  router.push({
    name: 'AgencyDyjAgentExchangeUserList',
    query: {
      name,
      colonelId: colonel_id
    }
  });

};
// 跳转订单总数
const onClickOrderCount = (row: any) => {
  router.push({
    name: 'AgencyDyjAgentAgentOrder',
    query: {
      id: row.colonel_id
    }
  });

};
// 调整保证金
const adjustBondModal = ref();
const onClickModify = (row: any) => {
  adjustBondModal.value.show(1, row);
};
// 操作记录

const operationListModal = ref();
const onClickOprHistory = (row: any) => {
  operationListModal.value.show(2, row);
};
// 重置
const onClickReset =() => {
  methods.onReset();
};
/**
 * @时间控件
 */
const timeChange = () => {
  methods.onSearch();
};
</script>
